import KeyboardShortcuts from "@site/src/components/KeyboardShortcuts";
import MultiselectMetadata from "@react-metadata/Multiselect";
import PropsList from "@theme/PropsList";

A `<select>` alternative multiple values.

## Overview

The `<Multiselect>` renders an array of `data` and manages the selection, filtering and value state.

```jsx live
import Multiselect from "react-widgets/Multiselect";

<Multiselect
  defaultValue={["Yellow"]}
  data={["Red", "Yellow", "Blue", "Orange"]}
/>;
```

Like other React Widget components, data can be complex; not limited to strings or numbers.

```jsx live
import Multiselect from "react-widgets/Multiselect";

<Multiselect
  dataKey="id"
  textField="color"
  defaultValue={[1]}
  data={[
    { id: 1, color: "Red" },
    { id: 2, color: "Yellow" },
    { id: 3, color: "Blue" },
    { id: 4, color: "Orange" },
  ]}
/>;
```

## Custom Rendering

## Keyboard shortcuts

- <kbd>left arrow</kbd> move focus to previous tag
- <kbd>right arrow</kbd> move focus to next tag
- <kbd>delete</kbd> deselect focused tag
- <kbd>backspace</kbd> deselect next tag
- <kbd>alt + up arrow</kbd> close Multiselect
- <kbd>down arrow</kbd> open Multiselect, and move focus to next
  item
- <kbd>up arrow</kbd> move focus to previous item
- <kbd>home</kbd> move focus to first item
- <kbd>end</kbd> move focus to last item
- <kbd>enter</kbd> select focused item
- <kbd>ctrl + enter</kbd> create new tag from current searchTerm
- <kbd>any key</kbd> search list for item starting with key

## API

<PropsList props={MultiselectMetadata.props} />
